<template>
  <view class="index">
    <!-- 搜索框 -->
    <Search></Search>

    <!-- 轮播广告 -->
    <view class="banner">
      <swiper
        :indicator-dots="true"
        indicator-active-color="#ea4350"
        :autoplay="true"
        :circular="true"
      >
        <swiper-item v-for="(item, index) in banners" :key="index">
          <navigator :open-type="item.open_type" :url="item.navigator_url"
            ><image :src="item.image_src" mode="widthFix"></image
          ></navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 分类 -->
    <view class="classify">
      <view class="content" v-for="(item, index) in classify" :key="index">
        <view @click="skip"
          ><image :src="item.image_src" mode="widthFix"></image
        ></view>
      </view>
    </view>
    <!-- 楼层 -->
    <!-- 楼层 -->
    <view class="floors">
      <view class="floor" v-for="(item, index) in floorList" :key="index">
        <view class="floor_title"
          ><image
            style="height: 59rpx"
            mode="widthFix"
            :src="item.floor_title.image_src"
          ></image
        ></view>
        <view class="floor_product">
          <navigator
            :url="product.navigator_url"
            :open-type="product.open_type"
            class="product"
            v-for="(product, index) in item.product_list"
            :key="index"
          >
            <image :src="product.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search.vue";
export default {
  components: {
    Search,
  },

  data() {
    return {
      banners: [],
      classify: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getBanners();
    this.getClassify();
    this.getFloor();
  },
  // 监听用户刷新
  onPullDownRefresh() {
    console.log("下拉刷新开始了");
    Promise.all([this.getBanners(), this.getClassify(), this.getFloor()]).then(
      () => {
        // 停止下拉刷新
        uni.stopPullDownRefresh();
      }
    );
  },
  methods: {
	  skip(){
		  uni.reLaunch({
		  	url:'../category/index'
		  })
	  },
    // 轮播图的请求
    async getBanners() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      });
      if (res.data.meta.status === 200) {
        const message = res.data.message.map((item) => {
          item.navigator_url = item.navigator_url.replace("main", "index");
          return item;
        });
        this.banners = message;
      }
    },
    // 分类的请求
    async getClassify() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      });
      if (res.data.meta.status === 200) {
        this.classify = res.data.message;
      }
    },
    async getFloor() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      });
      if (res.data.meta.status === 200) {
        res.data.message.forEach((item) => {
          item.product_list.forEach((product) => {
            product.navigator_url = product.navigator_url.replace(
              "goods_list",
              "goods_list/index"
            );
          });
        });
        this.floorList = res.data.message;
      }
    },
  },
};
</script>
<style lang="less">
.banner {
  swiper-item {
    height: 340rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.classify {
  margin: 10rpx 0 43rpx 0;
  height: 140rpx;
  display: flex;
  padding: 0 10rpx;
  justify-content: space-between;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}
/* 楼层 */
.floor_product {
  margin: 0 12rpx;
}
.floor .floor_product .product {
  width: 232rpx;
  height: 188rpx;
  border-radius: 5rpx;
  display: inline-block;
}
.floor .floor_product .product image {
  width: 100%;
  height: 100%;
}
.floor .floor_product .product:nth-child(even) {
  margin: 0rpx 15rpx;
}
.floor .floor_product .product:first-child {
  height: 386rpx;
  float: left;
}
/* 楼层 */
</style>
